@charset "UTF-8";
:root {
  --width: 400px;
  --height: 267px;
  --puzzle: 80px;
  --moved: 0px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.captcha {
  position: relative;
  border-radius: 8px;
  width: var(--width);
  height: var(--height);
  aspect-ratio: 3 / 2;
  background-image: url('../img/cap-bg.jpg');
  background-size: cover;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.captcha.pass::before,
.captcha.pass::after,
.captcha.pass .handle {opacity: 0;}

.captcha::before, .captcha::after {
  position: absolute;
  display: block;
  width: inherit;
  height: inherit;
  content: "";
  background: inherit;
  clip-path: inset(
    calc((var(--height) - var(--puzzle)) / 2) 
    var(--puzzle) 
    calc((var(--height) - var(--puzzle)) / 2) 
    calc(var(--width) - var(--puzzle) * 2)
  );
}

.captcha::after {
  transform: translateX(
    clamp(
      calc(var(--width) * -1),
      calc((var(--width) * -1) + var(--moved)),
      var(--puzzle)
    )
  );
  transition: .25s all ease-in-out;
}

.captcha::before {
  background-color: rgba(0, 0, 0, .6);
  background-blend-mode: multiply;
}

.handle {
  position: absolute;
  bottom: -50px;
  left: calc(var(--puzzle) * 2 * -1);
  width: calc(var(--width) + var(--puzzle) * 2);
  height: 30px;
  border-radius: 30px;
  background-color: #eee;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
  border: 4px solid #ccc;
}

.handle span {
  position: absolute;
  display: block;
  width: var(--puzzle);
  height: inherit;
  border-radius: inherit;
  background-color: #fff;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .3);
  cursor: move;
  transition: .25s all ease-in-out;
  transform: translateX(
    clamp(
      0px,
      var(--moved), 
      calc(var(--width) + var(--puzzle))
    )
  );
}

.captcha:active::after, 
.captcha:active .handle span {transition: none;}
